import React, { Component } from 'react';
import './main.css';

const TimelineMax = new window.TimelineMax();
let animation;
class AnimateControl extends Component {
  componentDidMount() {
    animation = TimelineMax.to(".green", 1, {x:550})
                           .to(".blue", 1, {x:550})
                           .to(".orange", 1, {x:550});
    animation.pause();
  }
  
  play = () => {
    animation.play();
  }

  pause = () => {
    animation.pause();
  }
  resume = () => {
    animation.resume();
  }
  reverse = () => {
    animation.reverse();
  }
  seek = () => {
    animation.seek(1);
  }
  timeScale5 = () => {
    animation.timeScale(5);
  }
  timeScale5_2 = () => {
    animation.timeScale(0.5);
  }
  restart = () => {
    animation.restart();
  }
  progress = () => {
    animation.progress(0.5);
  }

  render() {
    return (
      <div>
        <div className="box green"></div>
        <div className="box blue"></div>
        <div className="box orange"></div>

        <div className="btn-set">
          <button className="btn" id="play" onClick={this.play}>play</button>
          <button className="btn" id="pause" onClick={this.pause}>pause</button>
          <button className="btn" id="resume" onClick={this.resume}>resume</button>
          <button className="btn" id="reverse" onClick={this.reverse}>reverse</button>
          <button className="btn" id="seek" onClick={this.seek}>seek(1)</button>
          <button className="btn" id="restart" onClick={this.restart}>restart</button>
          <button className="btn" id="progress" onClick={this.progress}>跳转到50%</button>
          <button className="btn" id="timeScaleSpeed" onClick={this.timeScale5}>speed</button>
          <button className="btn" id="timeScaleSlow" onClick={this.timeScale5_2}>slow</button>
        </div>
        <h3>参考链接</h3>
        <div>
          <a href="http://svgtrick.com/book/greensock/" target="_bank">GreenSock简明教程</a>
        </div>
        <div>
          <a href="https://www.xgllseo.com/?p=5048" target="_bank">动画库GSAP|中文手册（只是一篇简单的博客）</a>
        </div>
        <div>
          <a href="https://greensock.com/docs/#/HTML5/GSAP/" target="_bank">官网手册</a>
        </div>
      </div>
    );
  }
}

export default AnimateControl;